<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>全部课程</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/exanIndex.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div v-cloak id="zbom">

	<header class="header">
		<a class="left_icon back_btn"></a>
		<h4 class="title">全部课程</h4>
		<a class="right_icon screen_icon" @click="openSubPage"></a>
	</header>
	
	<nav class="h5 bg-w searchMod">
		<div class="flex-row bg-w searchBox">
			<input type="text" class="flex-full" placeholder="请输入课程名称" />
			<button class="btn" type="button"></button>
		</div>
	</nav>
	
	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="examIndex">
					
					<div class="dm-title dm-clearfix" v-if="res && res.length > 0">
						<h5 class="dm-left">{{res}}</h5>
						<h5 class="dm-right empty-btn" @click="emptyRes">清空</h5>
					</div>
					<!--全部课程-->
					<div class="lessonMod bg-w bottom-line">
						<ol class="lessonBox flex-row bottom-line" v-for="(item,index) in lesson" @click="skipDtl(item.id)">
							<li class="photo">
								<img :src="item.photo" />
							</li>
							<li class="info flex-full">
								<h5 class="name dm-wrap">{{item.name}}</h5>
								<h5 class="classifyMod">
									{{item.classify}}
									<span class="type">{{item.type}}</span>
								</h5>
								<h5 class="exMod dm-clearfix">
									<div class="num dm-left">
										<template v-if="item.type == '线下' && item.statu == 0">
											{{item.startTime}}
										</template>
										<template v-else>
											<span class="icon">
												<img src="image/icon/preview_icon.png" />
											</span>{{item.viewNum}}
										</template>
									</div>
									<div class="total h6 dm-wrap dm-right">
										<template v-if="item.type == '线上'">
											<span v-if="item.statu == 0">未开始学习</span>
											<span v-else-if='item.statu == 1'>已学{{item.duration}}个课时</span>
											<span v-else-if='item.statu == 2' style="color:#666;">已完成学习</span>
										</template>
										<template v-else>
											<span class="unachieve" v-if="item.statu == 0">立即报名</span>
											<span class="achieved" v-if="item.statu == 1">已报名</span>
										</template>
									</div>
								</h5>
							</li>
						</ol>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
	
	<!--筛选-->
	<div class="subMain animate">
		<header class="header">
			<a class="left_icon back_btn" data-type="1"></a>
			<h4 class="title">筛选</h4>
		</header>
		<div class="swiper-container Main" id="subMain">
			<div class="swiper-wrapper">
				<div class="swiper-slide content">
					<div class="children">
						
						<div class="dm-norlist bg-w dm-mt dm-mb top-line bottom-line">
							<ul class="list flex-row bottom-line arrow" @click="screenMod(0)">
								<li class="name">课程形式</li>
								<li class="cot flex-full tr">{{screens.type == '' ? '请选择' : screens.type}}</li>
							</ul>
							<ul class="list flex-row bottom-line arrow" @click="screenMod(1)">
								<li class="name">学习状态</li>
								<li class="cot flex-full tr">{{screens.statu == '' ? '请选择' : screens.statu}}</li>
							</ul>
						</div>
						
						<button class="submitBtn" @click="enterScreen" type="button">确定</button>
						
					</div>
				</div>
			</div>
		</div>
	</div>

</div>


<!--引入模拟数据-->
<script src="data/examData.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#zbom",
	data:{
		swiper:null,
		lesson:[],
		search:{
			name:'',
			type:'',
			statu:''
		},
		screens:{
			type:'',
			statu:''
		},
		typelist:['线上课程','线下课程'],
		statulist:['已报名','未报名'],
	},
	methods:{
		//获取数据
		getLesson:function(){
			this.lesson = courses;
		},
		//跳转详情
		skipDtl:function(id){
			location.href = 'courses_dtl.html?id='+id;
		},
		//打开筛选页
		openSubPage:function(){
			openSubMain('.subMain');
		},
		//筛选
		screenMod:function(t){
			var that = this;
			if(t==0){
				//选择课程形式
				dmSelect(that.typelist,function(index){
					that.screens.type = that.typelist[index];
				});
			}else if(t==1){
				//选择学习状态
				dmSelect(that.statulist,function(index){
					that.screens.statu = that.statulist[index];
				});
			};
		},
		//确认筛选
		enterScreen:function(){
			this.search.type = this.screens.type;
			this.search.statu = this.screens.statu;
			closeSubMain($('.subMain'));
		},
		//清空
		emptyRes:function(){
			this.search.type = this.screens.type = this.search.statu = this.screens.statu = '';
		},
	},
	mounted:function(){
		var that = this;
		this.swiper = pullSwiper('#Main',{
			up:true,
			down:true,
		});
		pullSwiper('#subMain');
		this.getLesson();
	},
	computed:{
		//监听数据变化
		res:function(){
			var arr = [];
			if(this.search.type != ''){
				arr.push(this.search.type);
			};
			if(this.search.statu != ''){
				arr.push(this.search.statu);
			};
			return arr.join(',');
		}
	}
});


//刷新数据
function refresh(pull){
	pull.innerText = '刷新成功';
};

//加载数据
function reload(pull){
	pull.innerText = '已加载全部数据'
};

</script>

</body>
</html>
